<template>
  <view class="body-content">
    <div>
      <div class="text-xl pt-2 text-white font-bold text-center">
        {{
          siteInfo[ConfigKeyCompanyName]
        }}
      </div>
      <!--      <div class="text-lg pt-0.5  text-white  text-center">-->
      <!--        气瓶溯源公示平台-->
      <!--      </div>-->


    </div>

    <empty-data v-if="isEmpty" :desc="'如有疑问请联系厂家： '+siteInfo[ConfigKeyCompanyTel]"
                :title="'数据为空,code:'+currQrcode"></empty-data>

    <!--   查询结果-->
    <div v-if="!isEmpty">
      <!--钢瓶号-->
      <div class="text-xl text-center pt-3">
        <span v-for="(item,index) in bottleInfo.link_info.bottle_number"
              class="border border-gray-400 text-gray-600 font-bold   p-1 ">{{ item }}</span>
      </div>

      <!-- 基本信息 -->
      <div class="flex mt-3.5 justify-center items-center gap-4 flex-wrap">
        <div class="w-full max-w-[20rem] px-4 py-1 bg-white rounded-2xl">
          <div class="flex justify-center items-center text-center font-bold my-1 text-blue-500">
            <image class="w-4 h-4 mr-0.5" src="/static/h5images/qiping.png"></image>
            气瓶基本信息
          </div>
          <hr class=" my-1">

          <!--        基本信息图片-->
          <div @click="previewPic(bottleInfo.extra_info['info_image'] ?? '')">

            <div class="h-60">
              <image v-if="bottleInfo.extra_info['info_image']"
                     :src="formatStaticUrl(bottleInfo.extra_info['info_image'] ?? '/static/h5images/pic.png',false) "
                     class="h-full w-full rounded-3xl object-cover object-center cursor-pointer"
                     mode="aspectFit" onerror="this.src='/static/pic.png';"/>
              <loading v-if="!bottleInfo.extra_info['info_image']"></loading>
            </div>
          </div>

          <!--        其它图片-->
          <hr class="mt-1 my-3">

          <!-- 新增一个 div 用于包裹 thumbnail，并应用 Grid 布局 -->
          <div :class="bottleInfo.files.length <= 8 ? 'grid-cols-4' :'grid-cols-4'"
               class="grid  gap-2 items-center justify-between">
            <thumbnail
                v-for="(item, index) in bottleInfo.files"
                :key="index"
                :label="item['name']"
                :url="formatStaticUrl(item['full_url'] ?? '')"
                class="w-full aspect-square"
            >
              {{ item }}
            </thumbnail>
          </div>

          <!-- 合格证和瓶阀信息-->
          <div class="flex mt-2 mb-2 items-center mx-4 justify-between">
            <div class="flex items-center justify-center gap-1 cursor-pointer" @click="getHegeImage">
              <div class="text-2xl">
                <image class="w-4 h-4" src="/static/h5images/hege.png"></image>
              </div>
              <p class="text-sm">查看合格证</p>
            </div>

            <div class="flex items-center justify-center gap-1 cursor-pointer"
                 @click="jump(bottleInfo.link_info.vq_url ?? '#')">
              <div class="text-2xl">
                <image class="w-4 h-4" src="/static/h5images/famen.png"></image>
              </div>
              <p class="text-sm">查看瓶阀信息</p>
            </div>
          </div>

        </div>
      </div>

      <!--    其他服务列表-->
      <div
          class="mx-7  mt-3 bg-white border-2 justify-center  border-solid rounded-lg  min-h-24">
        <div
            class=" flex  justify-center items-center text-center font-bold my-1 text-blue-500">
          <!--          <image class="w-4 h-4 mr-0.5" src="/static/h5images/zhuisu.png"></image> -->
          其它追溯信息与服务
        </div>
        <hr>
        <!-- 服务列表  4个服务一行 如果需要新增服务可以使用 -->
        <div class="flex justify-between items-center py-2 px-0.5">
          <!--          充装信息-->
          <div class="flex flex-col items-center justify-center  "
               @click="searchRecordFill()">
            <div class="w-6 h-6 mb-1">
              <image alt="Icon" class="w-full h-full object-contain" src="/static/h5images/chongzhuang.png"></image>
            </div>
            <div class="text-gray-500">
              <p class=" font-medium ">充装信息</p>
            </div>
          </div>

          <!--          定检信息-->
          <div class="flex flex-col items-center justify-center m-1.5 "
               @click="searchRecordCheck()">
            <div class="w-6 h-6 mb-1">
              <image alt="Icon" class="w-full h-full object-contain" src="/static/h5images/dingjian.png"></image>
            </div>
            <div class="text-gray-500">
              <p class=" font-medium">定检信息</p>
            </div>
          </div>


          <!--          登记信息-->
          <div class="flex flex-col items-center justify-center m-1.5 " @click="RegisterInfo">
            <div class="w-6 h-6 mb-1">
              <image alt="Icon" class="w-full h-full object-contain" src="/static/h5images/dengji.png"></image>
            </div>
            <div class="text-gray-500">
              <p class=" font-medium">登记信息</p>
            </div>
          </div>

          <!--          联系厂家-->
          <div class="flex flex-col items-center justify-center m-1.5 " @click="ContactFact">
            <div class="w-6 h-6 mb-1">
              <image alt="Icon" class="w-full h-full object-contain" src="/static/h5images/kefu.png"></image>
            </div>
            <div class="text-gray-500">
              <p class=" font-medium">联系厂家</p>
            </div>
          </div>
        </div>
      </div>

    </div>


    <!--   页脚-->
    <footer class="bg-gray-400 text-white py-0.5 fixed bottom-0 w-screen">
      <div class=" text-center  flex items-center justify-center">
        <span>©由宁波智合信息技术服务有限公司提供技术支持</span>
      </div>
    </footer>


    <popup ref="refPopShow" class="w-80 ">
      <div class="min-h-12  text-center pt-4 bg-gray-100">
        如有问题请联系厂家客服:
        <span style="color: #4891b9" @click="callPhoneNumber(siteInfo[ConfigKeyCompanyTel])"> {{
            siteInfo[ConfigKeyCompanyTel]
          }}</span>
      </div>
    </popup>


    <!--    充装记录-->
    <popup ref="refFillShow" class="w-80 mx-3">
      <table class="min-w-full bg-white shadow-md rounded-lg mt-5">
        <thead class="bg-gray-400 text-white">
        <tr>
          <th class=" py-2 text-center text-xs font-medium uppercase tracking-wider">充装时间</th>
          <th class=" py-2 text-center text-xs font-medium uppercase tracking-wider">充装站</th>
          <th class="py-2 text-center text-xs font-medium uppercase tracking-wider">备注</th>
          <th class=" py-2 text-center text-xs font-medium uppercase tracking-wider">详情</th>
        </tr>
        </thead>
        <tbody class="bg-gray-200">
        <!-- Add your table rows here -->
        <tr v-for="item in fillRecords" class="bg-white border-b">
          <td class="text-center border-r  whitespace-no-wrap text-sm font-medium">{{ item['fill_date'] }}</td>
          <td class="text-center border-r  whitespace-no-wrap text-sm font-medium">{{ item['fill_size'] }}</td>
          <td class="text-center border-r  whitespace-no-wrap text-sm">{{ item['remark'] }}</td>
          <td class="text-center border-r  whitespace-no-wrap text-sm text-blue-500 hover:text-blue-700 font-medium cursor-pointer">
            <span v-if="item['detail_link']" @click="jump(item['detail_link'])">详情</span>
          </td>
        </tr>
        </tbody>
      </table>

    </popup>

    <!--    定检记录-->
    <popup ref="refCheckShow" class="w-80 mx-3">
      <table class="min-w-full bg-white shadow-md rounded-lg mt-5">
        <thead class="bg-gray-400 text-white">
        <tr>
          <th class=" py-2 text-center text-xs font-medium uppercase tracking-wider">检查时间</th>
          <th class=" py-2 text-center text-xs font-medium uppercase tracking-wider">检查站</th>
          <th class="py-2 text-center text-xs font-medium uppercase tracking-wider">备注</th>
          <th class=" py-2 text-center text-xs font-medium uppercase tracking-wider">详情</th>
        </tr>
        </thead>
        <tbody class="bg-gray-200">
        <!-- Add your table rows here -->
        <tr v-for="item in checkRecords" class="bg-white border-b">
          <td class="text-center border-r  whitespace-no-wrap text-sm font-medium">{{ item['check_date'] }}</td>
          <td class="text-center border-r  whitespace-no-wrap text-sm font-medium">{{ item['check_size'] }}</td>
          <td class="text-center border-r  whitespace-no-wrap text-sm">{{ item['remark'] }}</td>
          <td class="text-center border-r  whitespace-no-wrap text-sm text-blue-500 hover:text-blue-700 font-medium cursor-pointer">
            <span v-if="item['detail_link']" @click="jump(item['detail_link'])">详情</span>
          </td>
        </tr>
        </tbody>
      </table>

    </popup>

  </view>
</template>

<script lang="ts" setup>
import Thumbnail from "@/components/thumbnail.vue";
import {previewPic} from "@/utils/previewImage";
import {onMounted, ref} from "vue"
import {
  requestGetBottleInfo,
  requestGetHegeImage,
  requestGetSiteInfo,
  requestSearchRecordCheck,
  requestSearchRecordFill
} from "@/request/modules";
import type {RespBottleInfo} from "@/request/dto/pub_qr_linq";
import {ConfigKeyCompanyName, ConfigKeyCompanyTel} from "../../constants/company";
import {formatStaticUrl} from "@/utils/domain";
import Loading from "@/components/loading.vue";
import EmptyData from "@/components/emptyData.vue";
import {Toast} from "@/utils/toast";
import Popup from "@/components/popup.vue";
import {callPhoneNumber} from "@/utils/phone";
import {jump} from "@/utils/url";

const isEmpty = ref(false)
const bottleInfo = ref<RespBottleInfo>({
  company_info: {
    name: "",
    uid: ""
  },
  extra_info: {
    "certificate": "",
  },
  files: [] as Array<any>,
  link_info: {
    bottle_number: "钢瓶号拼命加载中...",
    bottle_image: "/static/h5images/pic.png",
  }
} as RespBottleInfo);

const siteInfo = ref({
  ConfigKeyCompanyName: "xxx公司",
})

const currQrcode = ref("")


onMounted(() => {
  //获取二维码code,直接按照/来分割
  const currentUrlItems = window.location.href.split("/");
  currQrcode.value = currentUrlItems[currentUrlItems.length - 1]
  console.log(currQrcode.value, " currQrcode.value")

  requestGetSiteInfo().then(((res: any) => {
    siteInfo.value = res.data.data
  }))

  requestGetBottleInfo({bq_code: currQrcode.value}).then((res => {
    console.log(res)
    if (res.data.code != 1) {
      isEmpty.value = true
    } else {
      bottleInfo.value = res.data.data
    }
  }))
})

//获取重装记录
const refFillShow = ref()
const fillRecords = ref()
const searchRecordFill = () => {
  requestSearchRecordFill(formatSearchWheres("bq_code", currQrcode.value)).then(res => {
    if (res.data.code == 0 || !res.data.data['list'] || res.data.data['list'].length == 0) {
      //直接跳转
      jump(bottleInfo.value.extra_info['link_inflate'], "此瓶暂无充装信息，待录入")
      return
    }
    fillRecords.value = res.data.data['list']
    refFillShow.value.showPopup()
    console.log(res.data.data, "res.data.data")
  })

}


//获取定检记录
const refCheckShow = ref()
const checkRecords = ref()
const searchRecordCheck = () => {
  requestSearchRecordCheck(formatSearchWheres("bq_code", currQrcode.value)).then(res => {
    if (res.data.code == 0 || !res.data.data['list'] || res.data.data['list'].length == 0) {
      //直接跳转
      jump(bottleInfo.value.extra_info['link_check'], "此瓶暂无定检信息，待录入")
      return
    }
    checkRecords.value = res.data.data['list']
    refCheckShow.value.showPopup()
    console.log(res.data.data, "res.data.data")
  })

}


const formatSearchWheres = (filedName: string, value: string) => {
  let wheres = {
    extra: {
      pageNum: 1,
      pageSize: 50
    },
    wheres: [
      {
        field: filedName,
        opt: "=",
        value: value
      }
    ]
  }

  return wheres
}


//获取合格证图片
const getHegeImage = () => {
  uni.showLoading({
    title: '加载中'
  });
  requestGetHegeImage({bq_code: currQrcode.value}).then(res => {
    uni.hideLoading();
    if (res.data.code == 1) {
      previewPic(res.data.data)
    } else {
      Toast(res.data.msg)
    }
  })
}

//联系厂家
const refPopShow = ref()
const ContactFact = () => {
  refPopShow.value.showPopup()
}

//充装信息
const FillInfo = () => {
  Toast("正在完善中...")
}

//登记信息
const RegisterInfo = () => {
  Toast("正在完善中...")
}

//定检信息
const CheckInfo = () => {
  Toast("正在完善中...")
}

</script>

<style>
.body-content {
  background-image: url("@/static/h5images/bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 100vh;
}
</style>
